<template>
  <div>
    <el-col><el-button type="danger" @click="addHttpHead">添加</el-button></el-col>

    <div v-for="(item,index) in httpHeaders" :key="index">
      <el-col :span="10">
        <el-form-item  :label="keyName">
          <el-input v-model="item.key" :placeholder="'请输入'+keyName" @change="change"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item  :label="valueName">
          <el-input v-model="item.value" :placeholder="'请输入'+valueName" @change="change"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-button type="info" @click.prevent="delHttpHead(item,index)">删除</el-button>
      </el-col>
    </div>

  </div>
</template>
<script>
  export default {
    props:{
      value:{},
      keyName:{
        type: String,
        default: '键'
      },
      valueName:{
        type: String,
        default: '值'
      }
    },
    data(){
      return {
        httpHeaders: this.value,
        keyRule: {
          required: true, message: '键不能为空', trigger: 'blur'
        },
        valueRule: {
          required: true, message: '值不能为空', trigger: 'blur'
        },
      }
    },
    watch:{
      value(newVal,oldVal){
        this.httpHeaders = newVal;
      },
      httpHeaders(newVal,oldVal){
        this.$emit('input', newVal)
      }
    },
    methods:{
      //添加
      addHttpHead(){
        this.httpHeaders.push({
          key: '',
          value: '',
          // date: Date.now()
        })
      },
      //删除
      delHttpHead(item){
        let index = this.httpHeaders.indexOf(item)
        if (index !== -1) {
          this.httpHeaders.splice(index, 1)
        }
      },
      change(){
        this.$emit('input', this.httpHeaders)
      }
    }
  }
</script>
